<script setup>
import { ref, onBeforeMount } from "vue";
import './styles/TaskCard.scss'

const props = defineProps({
  item:{
    type: Object,
  },
  type: { // 0活动卡片  1任务卡片 2任务详情卡片
    type: Number,
    default: 0
  }
})
const tags = ref([])
const tags_style = [
  { color: '#2B5EFF', bgColor: '#ECF1FF', borderColor: '#7495FF', name: '蓝' },
  { color: '#FF6C2B', bgColor: '#FFF9EC', borderColor: '#FFD674', name: '橙' },
  { color: '#8C4CFE', bgColor: '#ECF1FF', borderColor: '#B186FF', name: '紫' },
  { color: '#FF2B2B', bgColor: '#FFF0EC', borderColor: '#FF9574', name: '红' }
]
onBeforeMount(()=>{
  if(props.item.tags){
    tags.value = props.item.tags.split(',')
  }
})
</script>

<template>
  <view class="task-box-a1">
    <view class="task-order-a1"  v-if="type===1">
      <view class="id-a1">
        <nut-icon name="shop" size="13" color="#2B5FFF" class="shop-a1"></nut-icon>
        活动ID:{{item.id}}
      </view>
      <view class="status-a1">
        <!-- 已驳回 -->
        <view class="content-btn-a1 top-btn" v-if="type===1">查看详情</view>
      </view>
    </view>
    <view class="top-box-a1">
      <view class="info-a1">
        <view class="title-a1">
          <cdn-img src="/static/img/shoot.png" class="shoot-a1" />
          <text class="title-a1-con">{{item.title}}</text>
        </view>
        <view class="price-a1">任务金￥<text class="num-a1">{{item.photo_man_money}}</text></view>
      </view>
      <cdn-img :src="item.upload[0].full_path" class="pic" mode="aspectFill" v-if="item.upload&&item.upload.length>0" :lazyLoad="true"/>
      <cdn-img :src="item.pic" v-else class="pic" mode="aspectFill" :lazyLoad="true"/>
    </view>

    <view class="tags-box-a1" v-if="type!==2">
      <view v-for="(item,key) in tags" :key="key" class="tag-a1">
        <view :style="{color: tags_style[key%4].color}" class="tag-item-a1">
          <view class="tb-left-a1" :style="{'border-right-color': tags_style[key%4].borderColor}">
            <view class="tb-left-n-a1" :style="{'border-right-color': tags_style[key%4].bgColor}"></view>
          </view>
          <view class="tb-center-a1" :style="{background: tags_style[key%4].bgColor,borderTop: `1px solid ${tags_style[key%4].borderColor}`,borderBottom: `1px solid ${tags_style[key%4].borderColor}`}">
            · {{item}} ·
          </view>
          <view class="tb-right-a1" :style="{'border-left-color': tags_style[key%4].borderColor}">
            <view class="tb-right-n-a1" :style="{'border-left-color': tags_style[key%4].bgColor}"></view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-box-a1" v-if="type!==2">
      <view class="address-time-a1">
        <view class="address-a1">店铺地址：{{item.shop_address}}</view>
        <view>活动截止日期: {{item.end_time}}</view>
      </view>
      <view class="content-btn-a1" v-if="type===0" @click="$emit('toDes',item.id)">查看详情&nbsp></view>
    </view>
  </view>
</template>
